<template>
	<el-dialog title="添加图层" width="280" v-model="visible" :close-on-click-modal="false" draggable>
		<el-form ref="dialogFormRef" :model="dataForm" :rules="dataRules" v-loading="loading">
			<el-form-item prop="nameSpace">
				<el-select v-model="dataForm.nameSpace" :suffix-icon="IconDropDown" placeholder="请选择项目" @change="getFileOptionsByProject" disabled>
					<el-option v-for="item in projectOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item prop="layerInfo">
				<el-select v-model="dataForm.layerInfo" :suffix-icon="IconDropDown" placeholder="请选择图层">
					<el-option v-for="item in layerOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button class="wid100" type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="addLayerDialog">
import { useMessage } from '/@/hooks/message';
import { useUserInfo } from '/@/stores/userInfo';
import { getIdProject } from '/@/api/admin/role';
import { geoLayerList } from '/@/api/project';
import DropDown from '/@/assets/icons/drop-down.svg';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['addLayer']);
// 引入组件

// 定义变量内容
const visible = ref(false);
const loading = ref(false);
const layerOptions = ref<any[]>([]);
const projectOptions = ref<any[]>([]);
const dialogFormRef = ref();
// 定义需要的数据
const dataForm = reactive({
	nameSpace: '',
	layerInfo: '',
});

const IconDropDown = {
	render: () => {
		return h('img', { src: DropDown });
	},
};

// 表单校验规则
const dataRules = reactive({
	nameSpace: [{ required: true, message: '项目不能为空', trigger: 'blur' }],
	layerInfo: [{ required: true, message: '文件不能为空', trigger: 'blur' }],
});

//获取当前用户有哪些项目
const getInfoProject = async () => {
	const { data } = await getIdProject(useUserInfo().userInfos.roles);
	projectOptions.value = data.map((item: any) => {
		return {
			label: item.projectNameCh,
			value: item.wokeSpaceName,
		};
	});
};

// 根据项目获取图层列表
const getFileOptionsByProject = async (projectName: any) => {
	dataForm.layerInfo = '';
	if (projectName) {
		const { data } = await geoLayerList({ projectName: projectName });
		layerOptions.value = data.map((item: any) => {
			return {
				label: item.layerName,
				value: JSON.stringify(item),
			};
		});
	}
};

// 打开弹窗
const openDialog = (type: any, value: string) => {
	dataForm.nameSpace = value;
	visible.value = true;
	nextTick(() => {
		dataForm.layerInfo = '';
	});
};

// 保存数据
const onSubmit = async () => {
	const valid = await dialogFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
		loading.value = true;
		visible.value = false;
		emit('addLayer', JSON.parse(dataForm.layerInfo));
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

// 暴露变量 只有暴漏出来的变量 父组件才能使用
defineExpose({
	openDialog,
	dataForm,
});

watch(
	() => dataForm.nameSpace,
	(value) => {
		getFileOptionsByProject(value);
	}
);

onMounted(() => {
	getInfoProject();
});
</script>

<style scoped lang="scss">
.dialog-footer {
	display: flex;
	justify-content: center;
}

.blue-card {
	margin: 5px;
	padding: 10px;
	border-radius: 8px;
	background: #eaf1ff;
}
</style>
